<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="importmap">
        {
          "imports": {
            "three": "./js/three.module.js"
          }
        }
    </script>
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.156.1/three.min.js"></script-->
    <!-- https://cdn.bootcdn.net/ajax/libs/three.js/0.166.1/three.module.js -->
    <script src="./js/cube.js"></script>
    <script src="./js/three.js"></script>
    <script src="./points.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.160.1/three.js"></script> -->

    <!-- <script type="module">
        import {three} from './js/three.module.js'
   </script>     -->
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }

        #tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px;
            border-radius: 5px;
            display: none;
            /* 默认隐藏 */
            pointer-events: none;
            font-size: 12px;
            white-space: break-spaces;
            z-index: 1;
        }
    </style>
</head>

<body>
    <!-- 创建用于显示提示的文本元素 -->
    <div id="tooltip" onclick="tooltipCkick"></div>

    <script type="module">
        import { OrbitControls } from './js/controls/OrbitControls.js';
        import { regHover, regClick } from './js/listener/index.js'

        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000)


        // 创建相机
        const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.x = 400;
        camera.position.y = 100;
        camera.position.z += 800;

        // 创建渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, 800);
        // 渲染器能够渲染阴影效果
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);


        // 添加网格辅助器
        const gridHelper = new THREE.GridHelper(5000, 50); // 创建一个200单位的网格，细分为50个方格
        gridHelper.rotation.x = 0.5 * Math.PI
        scene.add(gridHelper);

        // 方向光
        const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
        directionalLight.position.set(10, 10, 10);

        directionalLight.shadow.mapSize.width = 1024  // default
        directionalLight.shadow.mapSize.height = 1024  // default
        directionalLight.shadow.camera.near = 0.05  // default
        directionalLight.shadow.camera.far = 500  // default
        //将范围调大
        directionalLight.shadow.camera.top = 20 /// 这个是生效的属性
        directionalLight.shadow.camera.right = 20
        directionalLight.shadow.camera.left = -20
        directionalLight.shadow.camera.bottom = -20
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        // 环境光
        const ambientLight = new THREE.AmbientLight(0xffffff, 2);
        scene.add(ambientLight);

        // 添加鼠标控制
        const controls = new OrbitControls(camera, renderer.domElement);
        // controls.enableDamping = true; // 使得相机移动更加平滑
        controls.dampingFactor = 0.05; // 阻尼效果


        // var geometry = new THREE.BoxGeometry(1,1,1);
        // var material = new THREE.MeshBasicMaterial({color:"#ff0000"});
        // var mesh = new THREE.Mesh(geometry,material);
        // scene.add(mesh);

        // 添加 XYZ 坐标轴 (红: X, 绿: Y, 蓝: Z)
        const axesHelper = new THREE.AxesHelper(16);  // 参数表示轴的长度
        scene.add(axesHelper);

        // 添加箭头
        const arrowSize = 0.1;  // 箭头大小
        const arrowHeadLength = 0.15; // 箭头头部长度
        const arrowHeadWidth = 0.1;  // 箭头头部宽度

        // X 轴箭头 (红色)
        const xArrow = new THREE.ArrowHelper(
            new THREE.Vector3(1, 0, 0),   // 方向 (沿 X 轴)
            new THREE.Vector3(4, 0, 0),   // 起点 (X 轴末端)
            arrowSize,                    // 箭头长度
            0xff0000,                     // 红色
            arrowHeadLength,              // 箭头头部长度
            arrowHeadWidth                // 箭头头部宽度
        );
        scene.add(xArrow);

        // Y 轴箭头 (绿色)
        const yArrow = new THREE.ArrowHelper(
            new THREE.Vector3(0, 1, 0),   // 方向 (沿 Y 轴)
            new THREE.Vector3(0, 4, 0),   // 起点 (Y 轴末端)
            arrowSize,                    // 箭头长度
            0x00ff00,                     // 绿色
            arrowHeadLength,              // 箭头头部长度
            arrowHeadWidth                // 箭头头部宽度
        );
        scene.add(yArrow);

        // Z 轴箭头 (蓝色)
        const zArrow = new THREE.ArrowHelper(
            new THREE.Vector3(0, 0, 1),   // 方向 (沿 Z 轴)
            new THREE.Vector3(0, 0, 4),   // 起点 (Z 轴末端)
            arrowSize,                    // 箭头长度
            0x0000ff,                     // 蓝色
            arrowHeadLength,              // 箭头头部长度
            arrowHeadWidth                // 箭头头部宽度
        );
        scene.add(zArrow);

        // let optCubes = await import('./points.json', { with: { type: "json" } }) //await fetch('./points.json').then(res => res.json())

        var opt = { xx: 'OK' }
        const cubes = optCubes.map(element => drawCubeByPlane(scene, element.type, element.points, indicesCube, Object.assign(element, opt)));

        regHover(camera, scene, cubes)

        regClick(camera, scene, cubes)

        function render() {
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }
        render();

        function tooltipCkick(e) {
            console.warn(e)
        }
    </script>
</body>

</html>